<template>
  <div>
    <div class="flex align-center">
      <span>您本次将要变更的服务对象是</span>
      <span class="f18 text-black mg-6">{{ name }}</span>
      <p>
        本次变更的数据有<span class="f18 text-black mg-6"> {{ total }} 条 </span>
        请确认内容后提交
      </p>
    </div>
    <div class="content w-100 flex align-center">
      <div class="left flex1">
        <div v-for="(chi, val) of beforeData" :key="val" class="flex">
          <p class="label">{{ val }}:</p>
          <div v-if="Array.isArray(chi)">
            <ul>
              <li v-for="(item, index) in chi" :key="index" class="mt10">
                <p>姓名: {{ item.contactName }}</p>
                <p>身份证号: {{ item.contactCardId }}</p>
                <p>与老人关系: {{ item.elderlyRelationship }}</p>
                <p>手机: {{ item.contactTelephone }}</p>
                <p>现居地区: {{ item.contact_areas_name }}</p>
              </li>
            </ul>
          </div>
          <p v-else>{{ chi }}</p>
        </div>
      </div>
      <div class="tip text-blue f18"><strong>变更为</strong></div>
      <div class="right flex1">
        <div v-for="(key, val) of afterData" :key="key" class="flex">
          <div v-if="Array.isArray(key)">
            <el-divider>
              {{ val }}
            </el-divider>
            <ul>
              <li v-for="(item, index) in key" :key="index" class="mt10">
                <p>姓名: {{ item.contactName }}</p>
                <p>身份证号: {{ item.contactCardId }}</p>
                <p>与老人关系: {{ item.elderlyRelationship }}</p>
                <p>手机: {{ item.contactTelephone }}</p>
                <p>现居地区: {{ item.contact_areas_name }}</p>
              </li>
            </ul>
          </div>
          <template v-else>
            <p class="label">{{ val }}:</p>
            <span>{{ key }}</span>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
type Props = {
  beforeData?: any
  afterData?: any
  name?: string
}
const props = withDefaults(defineProps<Props>(), {})

const total = computed({
  get: () => {
    let count = 0
    Object.values(props.afterData).map((item) => {
      count += 1
      if (Array.isArray(item)) {
        count += item.length
      }
    })
    return count
  },
  set(val) { },
})
</script>
<style scoped lang="scss">
.content {
  border-radius: 10px;
  background: #eee;
  padding: 10px;

  .list-item {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
  }

  .label {
    margin-right: 4px;
    min-width: 80px;
  }

  .tip {
    width: 200px;
  }
}</style>
